<template>
	<view class="login">

		<view class="login-head flex-y">
			<text class="login-head-h1">登录</text>
			<text class="login-head-h2">欢迎来到 {{ name }}</text>
		</view>

		<view class="login-body flex-y">

			<view class="flex-center">
				<text class="login-body-name">验证码登录</text>
			</view>

			<view class="login-body-item">
				<text class="login-body-label">手机号：</text>
				<input class="flex-1 tn-text" placeholder="请输入您的手机号" confirm-type='next' inputmode="email" maxlength="11"
					style="color:#fff" v-model="form.phone" type="number" />
			</view>

			<view class="login-body-item">
				<text class="login-body-label">验证码：</text>

				<input class="flex-1 tn-text" placeholder="短信验证码" confirm-type='done' inputmode="email" maxlength="6"
					:adjust-position="true" style="color:#fff" v-model="form.verify" @confirm="doLogin" type="number" />

				<uv-button type="error" @click="showImageVerify" :text="verify.tips" :plain="true" :hairline="false"
					custom-style="border:none;background:none;padding:0;height:auto" />
			</view>

			<view style="margin-top:80rpx;" class="flex-center">
				<uv-button type="success" shape="circle" size="large" @click="doLogin"
					custom-style="width:600rpx;height:100rpx" text="登 录" />
			</view>

		</view>

		<view class="login-foot">
			<view class='login-foot-agent flex-center tn-p-xl'>
				<uv-checkbox-group v-model="agent">
					<uv-checkbox shape="circle" activeColor="green" labelSize="26rpx" labelColor="#01beff" label="同意协议"
						:name="true" :checked="agent[0]" />
					<text @click="showAgreenment = true">《用户隐私协议》</text>
				</uv-checkbox-group>
			</view>
		</view>

		<m-show-agreement v-model:show="showAgreenment" @change="agentChange" />
		<m-show-verify-image v-model:show="showImageVerifyModal" @success="doSend" />

	</view>
</template>

<script lang="ts">
export { default } from './m-login-phone';
</script>

<style lang="scss" scoped>
@import "./m-login-phone.scss";
</style>